<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>计算器</title>
	<style type="text/css">
	.header{
		width: 100%;
		height: 5000px;
		background:#FF7C87;
	}
	.main{
		width: 310px;
		height: 350px;
		margin: 0px auto;
		background: #9CD2EB;
		margin-top: 200px;
		padding-left: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	*{
		margin-top: 0px;
		padding-left: 0px;
		list-style:none;
		text-align: center;
	}
	.dbg{
		width: 300px;
		height: 60px;
	}
	.xbg{
		width: 65px;
		height: 44px;
		float: left;
		margin-right: 10px;
		color: black;
		background: white;
		line-height: 45px;
	}
	.xbg4{
		width: 65px;
		height: 44px;
		float: left;
		margin-right: 10px;
		color: black;
		background: #F2FF93;
		line-height: 45px;
	}
	#xbg2{
		width: 210px;
		height: 55px;
		float: left;
		margin-right: 10px;
		color: black;
		text-align: right;
		line-height: 55px;
		background: #7AA7BB;
	}
	#xbg3{
		width: 70px;
		height: 55px;
		float: left;
		margin-right: 10px;
		color: black;
		line-height: 55px;
		background: #FF9FA9;
	}
	</style>
</head>
<body>
	<div class="header">
		<div class="main">
			<ul class="dbg">
				<li id="xbg3">c</li>
				<li id="xbg2">892554780</li>
			</ul>
			<ul class="dbg">
				<li class="xbg">7</li>
				<li class="xbg">8</li>
				<li class="xbg">9</li>
				<li class="xbg">+</li>
			</ul>
			<ul class="dbg">
				<li class="xbg">4</li>
				<li class="xbg">5</li>
				<li class="xbg">6</li>
				<li class="xbg">-</li>
			</ul>
			<ul class="dbg">
				<li class="xbg">1</li>
				<li class="xbg">2</li>
				<li class="xbg">3</li>
				<li class="xbg">%</li>
			</ul>
			<ul class="dbg">
				<li class="xbg">0</li>
				<li class="xbg">.</li>
				<li class="xbg4">=</li>
				<li class="xbg">*</li>
			</ul>
		</div>
	</div>
</body>
</html>